import React from 'react'
import {Button,Form,Input,Radio, Space} from "antd-mobile"

function AddList() {
    const onFinish=(value)=>{
        console.log(value)
    }
  return (
    <div>
      <div style={{marginTop:"10px"}}>
        <Button color='primary' fill='outline' style={{marginRight:"60px", marginLeft:"30px"}}>扫描证件添加</Button>
        <Button color='primary' fill='outline'>邀请好友填写</Button>
      </div>
      <div style={{marginTop:"10px"}}>
        <div style={{display:'flex', margin:'5px'}}>
            <p>乘客类型</p>
            <Space direction='vertical' style={{display:"flex"}}>
                <Radio>成人票</Radio>
            </Space>
        </div>
        <div>
            <Form onFinish={onFinish} layout='horizontal' footer={
            <Button block type='submit' color='primary' size='large'>
                确定
            </Button>
            }>
                <Form.Item label='姓名' name='name' rules={[{ required: true, message: '姓名不能为空' }]}>
                    <Input placeholder='与乘客姓名证件一致'></Input>
                </Form.Item>
                <Form.Item label='证件号' name='code' rules={[{ required: true, message: '证件号不能为空' }]}>
                    <Input placeholder='与乘客证件号码一致'></Input>
                </Form.Item>
                <Form.Item label='手机号' name='tel' rules={[{ required: true, message: '手机号不能为空' },{pattern:/^1[3-9]\d{9}$/,message:"输入正确手机号"}]}>
                    <Input placeholder='乘客本人手机号11位'></Input>
                </Form.Item>
            </Form>
        </div>
      </div>
    </div>
  )
}

export default AddList
